<template>
    <div>
        <input type="text" v-model="mytext" placeholder="ref侦听">
        <input type="text" v-model="state.mytext"  placeholder="reactive侦听方式侦听">
    </div>
</template>

<script>
import { reactive, ref, watch } from 'vue'
export default {
    setup(props) {
        const mytext = ref('')
        // 监听对象为一个变量写法
        watch(mytext, (newValue,oldValue) => {
            console.log(mytext.value, newValue, oldValue,'同步/异步','ajax')
        })
        // 监听对象为一个函数,监听的是函数返回值
        watch(()=>mytext.value, (newValue,oldValue) => {
            console.log(mytext.value, newValue, oldValue,'同步/异步','ajax')
        })
        // 多个数据源帧听, 数组中包含多个
        watch([mytext], (newValue,oldValue) => {
            console.log('多个数据源帧听')
        }, { immediate: true })
        // immediate: true 首次监听,模版加载完成后立马监听一次
        // deep:true 深度监听 不建议使用 因为如果深度比较多时,性能就会受到影响

        // reactive侦听方式
        const state = reactive({
            mytext: ''
        })
        // reactive侦听方式监听,需要使用get函数方式监听
        watch(() => state.mytext, (newValue, oldValue) => {
            console.log('reactive侦听')
        })
        return {
            mytext, state
        }
    }
}
</script>